<template>
	<view class="bigbox">
		<!-- 顶部tab -->
		<view class="tab_box">
			<view :class="sta == 1?'tab1 active':'tab1'" @click="qh(1)">贷款信息录入</view>
			<view :class="sta == 2?'tab2 active':'tab2'" @click="qh(2)">上传附件</view>
		</view>
		<!-- 贷款信息录入 -->
		<view>
			<view v-for="item in list2">
				<view class="fot1">{{item.title}}</view>
				<view class="box1">
					<view>
						<view class="fot3">基础信息（必填）</view>
					</view>
					<!-- <view class="g_fot1">订单编号：HC2020030001</view> -->
				</view>
				<view class="box2" v-for="(item1,index) in item.data">
					<!-- text,date,select,radio,label(不可修改), -->
					<view>{{item1.query02}}</view>
					<input v-if="item1.query03 == 'text'" v-model="item1.query07" type="text" placeholder="请输入">
					<wType :dat="{type:'select',num:index,item:item1}" @w_xl="w_xl" v-if="item1.query03 == 'select'"></wType>
					<wType :dat="{type:'date',num:index,item:item1}" @w_rq="w_rq" v-if="item1.query03 == 'date'"></wType>
					<!-- 不可修改的 -->
					<view v-if="item1.query03 == 'label'">{{item1.query07}}</view>
				</view>
			</view>
			<view class="all_btn btn_all" @click="xiayibu(3)">完成录单</view>
		</view>
		<!-- 上传附件 -->
		<view v-if="sta == 2">
			<view class="bj_box">
				<view @click="bj_sta=true">编辑</view>
				<view @click="bj_sta=false">确认</view>
			</view>
			<view v-for="item in list4">
				<view class="fot1">{{item.query03}}</view>
				<view class="box1">
					<view>
						<view class="fot3">基础信息（必填）</view>
					</view>
				</view>
				<view class="img_box">
					<view class="img_box1" v-for="(item1,index) in item.data01">
						<image :src="item1" @click="uploading(item,index)"></image>
						<view :class="item.data01.length-1 != index?'zhezhao':'zhezhao1'" @click="shan(item1,index,item)" v-if="bj_sta">
							<image class="" src="../../static/83.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="btn1">
				<view class="all_btn btn_all" @click="xiayibu()">保存</view>
				<view class="all_btn btn_all" @click="tijiao()">提交</view>
			</view>
		</view>
		
		<tanchuang v-if="tc_tijiao"  @tcnr="tanchuaung_nr" @tcgb="tanchuaung_gb"></tanchuang>
	</view>
</template>

<script>
	import tanchuang from '../../component/tanchuang.vue'
	import wType from '../../component/type.vue'
	export default {
		data() {
			const currentDate = this.getDate({
			    format: true
			})
			return {
				sta:1,
				loading_sta:false,
				tc_tijiao:false,
				bj_sta:false,
				list1:[],
				list2:[],
				list3:[],
				list4:[],
				arr:[{
					valur:10,
					title:'nan'
				},{
					valur:20,
					title:'nv'
				}],
				da1: '2020-05-27',
				da2: '2020-05-27',
				da3: '2020-05-27',
				index: 0,
				id:''
			}
		},
		components:{tanchuang,wType},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    }
		},
		onLoad:function(option){
			console.log(option.id,11111111111)
			this.id = option.id
			this.initial()
		},
		methods: {
			qh:function(e){
				this.sta = e
			},
			w_rq:function(e){
				console.log(e)
				this.list2.forEach((item)=>{
					item.data.forEach((item1)=>{
						if(e.item.id == item1.id){
							item1.query07 = e.name
						}
						console.log(item1)
					})
				})
			},
			w_xl:function(e){
				console.log(e)
				this.list2.forEach((item)=>{
					item.data.forEach((item1)=>{
						if(e.item.id == item1.id){
							item1.query07 = e.name
						}
						console.log(item1)
					})
				})
			},
			tanchuaung_gb:function(data){
				this.tc_tijiao = false;
			},
			tanchuaung_nr:function(data){
				this.$post('buse/fxjBuse_02/addFxjBuseitem_09',{
					rid:this.id,
					query02:data.spjg,
					query03:data.spyj,
					query05:data.nbyj
				}).then((res)=>{
					console.log(res.data,7777)
					if(res.data.success){
						this.tc_tijiao = false
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
							    delta: 1
							});
						},1000)
					}else if(!res.data.success){
						uni.showToast({
							title: res.data.message,
							icon:'none'
						})
					}
				})
			},
			tijiao:function(){
				this.tc_tijiao = true
			},
			xiayibu:function(e){
				console.log(e)
				console.log(this.list2)
				let fxjBuseitem_08List = []
				this.list2.forEach((item)=>{
					item.data.forEach((item1)=>{
						item1.query12 = JSON.stringify(item1.query12)
						fxjBuseitem_08List.push(item1)
					})
				})
				this.$put('buse/fxjBuse_02/edit08',{
						"createBy": "",
						"createTime": "",
						"data01": "",
						"data02": "",
						"data03": "",
						"data04": "",
						"data05": "",
						"data06": "",
						"data07": "",
						"data08": "",
						"data09": "",
						"data10": "",
						fxjBuseitem_08List:fxjBuseitem_08List,
						"id": "",
						"query01": "",
						"query02": "",
						"query03": "",
						"query04": "",
						"query05": "",
						"query06": "",
						"query07": "",
						"query08": "",
						"query09": "",
						"query10": "",
						"query11": "",
						"query12": "",
						"query13": "",
						"query14": "",
						"query15": "",
						"query16": "",
						"query17": "",
						"query18": "",
						"query19": "",
						"query20": "",
						"query21": "",
						"query22": "",
						"query23": "",
						"query24": "",
						"query25": "",
						"query26": "",
						"query27": "",
						"query28": "",
						"query29": "",
						"query30": "",
						"query31": "",
						"query32": "",
						"query33": "",
						"query34": "",
						"query35": "",
						"query36": "",
						"query37": "",
						"query38": "",
						"query39": "",
						"rid": "",
						"rowStatus": "",
						"sysOrgCode": "",
						"teantId": "",
						"updateBy": "",
						"updateTime": ""
				}).then((res)=>{
					if(res.data.success){
						console.log(res,3333333)
						this.tijiao()
						this.list2.forEach((item)=>{
							item.data.forEach((item1)=>{
								item1.query12 = JSON.parse(item1.query12)
							})
						})
					}
				})
			},
			tupian:function(){
				this.$get('buse/fxjBuse_02/listFxjBuseitem_01ByMainId',{
					pageNo:1,
					pageSize:9999,
					rid:this.id
				}).then((res)=>{
					this.list4 = res.data.result.records
					this.list4.forEach((item)=>{
						if(item.data01 == null || item.data01 == ''){
							item.data01 = []
							item.data01.push(item.query07)
						}
						if(item.data01[item.data01.length - 1] != item.query07){
							item.data01 = JSON.parse(item.data01)
							item.data01.push(item.query07)
						}
						
					})
					console.log(this.list4)
				})
			},
			getDate:function(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
				
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			// 数组去重/重组
			unique1:function(arr){
				for (let i = 0; i < arr.length; i++) {
					if(this.list1.indexOf(arr[i].query10)==-1){
						this.list1.push(arr[i].query10);
					}
				}
				// console.log(this.list1)
				this.list1.forEach((item)=>{
					let a = {
						title:'',
						data:[]
					}
					a.title = item
					this.list2.push(a)
				})
				this.list3.forEach((item)=>{
					// console.log(item.query10)
					this.list2.forEach((item1)=>{
						if(item.query10 == item1.title){
							if(item.query12 != ''){
								item.query12 = JSON.parse(item.query12)
							}
							item1.data.push(item)
						}
					})
					this.list2.forEach((item)=>{
						item.data.forEach((item1)=>{
							if(item1.query02 == '出生日期'){this.date1 = item1.query07}
							if(item1.query02 == '有效期开始日期'){this.date2 = item1.query07}
							if(item1.query02 == '有效日期截止日期'){this.date3 = item1.query07}
						})
					})
				})
			  // console.log(this.list2)
			},
			initial:function(){
				this.$get('buse/fxjBuse_02/listFxjBuseitem_08ByMainId',{
					pageNo:1,
					pageSize:9999,
					rid:this.id
				}).then((res)=>{
					this.list3 = res.data.result.records
					this.unique1(res.data.result.records)
				})
				this.tupian()
			}
		}
	}
</script>

<style>
	.loading_box{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.1);
		position: fixed;
		z-index: 100000;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn1>view{
		width: 48%;
	}
	.btn1{
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
	}
	.bj_box>view{
		padding: 5rpx 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #0F77FE;
		color: #0F77FE;
		margin-left: 20rpx;
		border-radius: 8rpx;
	}
	.bj_box{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.zhezhao>image,.zhezhao1>image{
		width: 35rpx;
		height: 35rpx;
	}
	.zhezhao{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.zhezhao1{
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.btn_all{
		margin: 50rpx 0;
	}
	.img_box1>image{
		width: 100%;
		height: 150rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.img_box1{
		width: 30%;
		height: 150rpx;
		margin-right: 3.3%;
		text-align: center;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		position: relative;
		/* border: 1px solid red; */
		margin-bottom: 30rpx;
	}
	.img_box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.fot3{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(244,48,48,1);
	}
	.fot2{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		margin-bottom: 19rpx;
	}
	.fot1{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		margin-bottom: 13rpx;
		margin-top: 20rpx;
	}
	.box1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.box2>input{
		text-align: right;
		font-size:30rpx;
	}
	.box2{
		height:88rpx;
		background:rgba(250,250,250,0.3);
		border:1px solid rgba(230,230,230,1);
		border-radius:10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(0,0,0,1);
		margin-top: 20rpx;
	}
	.active{
		background: #0F77FE;
		color: #FFFFFF !important;
	}
	.tab2{
		border-radius: 0 30rpx 30rpx 0;
	}
	.tab1{
		border-radius: 30rpx 0 0 30rpx;
	}
	.tab_box>view{
		width: 30%;
		height: 64rpx;
		border: 1px solid #0F77FE;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(15, 119, 254, 1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
	}
	.tab_box{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 50rpx;
	}
	.bigbox{
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>
